html {
  width: 100%;
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  color: #fff;
  background: #eee;
  -webkit-text-size-adjust: 100% !important;
}

#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

@media screen and (min-width: 350px) {
  html {
    font-size: 14px
  }
}

@media screen and (min-width: 500px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 350px) {
  html {
    font-size: 12px
  }
}

.view-page {
  width: 100%;
  height: 100%;
  position: relative;
}

.pos-abs {
  position: absolute;
}

.pos-relative {
  position: relative;
}

.full {
  width: 100%;
  height: 100%;
}

.relative {
  position: relative;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100% !important;
}

.text-center {
  text-align: center;
}

.generate-mtr(30);

.generate-mtr(@n, @i: 1) when (@i =< @n) {
  .mtr-@{i} {
    margin-top: .1rem * @i;
  }
  .generate-mtr(@n, (@i + 1));
}

.generate-mlr(30);

.generate-mlr(@n, @i: 1) when (@i =< @n) {
  .mlr-@{i} {
    margin-left: .1rem * @i;
  }
  .generate-mlr(@n, (@i + 1));
}

.generate-mrr(30);

.generate-mrr(@n, @i: 1) when (@i =< @n) {
  .mrr-@{i} {
    margin-right: .1rem * @i;
  }
  .generate-mrr(@n, (@i + 1));
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}

.clearfix:after, .clearfix:before {
  display:table;
  content:" ";
}
.clearfix:after {
  clear:both;
}

.hide {
  display: none;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.text-right {
  text-align: right;
}

.scroll-h {
  overflow-y: auto;
}